<template>
	<div>
		<Row class-name="three-column" :gutter="70">
			<Col :xs="24" :md="5">
				<p class="tip">基本信息</p>
				<Form ref='baseForm' :model="customerBaseVo" :label-width="80">
					<FormItem label="头像:" v-if="headpic!=''">
						<img :src="headpic" alt="" style="width: 100px;" />
					</FormItem>
					<FormItem label="姓名:">
						<Input :disabled="disabledInfo" v-model="customerBaseVo.realName" placeholder="请输入姓名"></Input>
					</FormItem>
					<FormItem label="性别:">
						<RadioGroup v-model="customerBaseVo.gender">
							<Radio label="1" :disabled="disabledInfo">男</Radio>
							<Radio label="2" :disabled="disabledInfo">女</Radio>
						</RadioGroup>
					</FormItem>
					<FormItem label="年龄:">
						<Input placeholder="请输入年龄" v-model="customerBaseVo.age" disabled="disabled"></Input>
					</FormItem>
					<FormItem label="出生日期:">
                		<DatePicker type="date" :value="customerBaseVo.birthday" :readonly='isReadonly1' :disabled="disabledInfo" @on-change='setTime' format="yyyy-MM-dd" placeholder="请选择出生日期" style="width: 100%"></DatePicker>						
					</FormItem>
					<FormItem label="家庭住址:">
						<al-selector v-model="resArr" :disabled="disabledInfo" searchable level="2" data-type="name" @on-change="handleOnSelectorChange"/>
						<Input v-model="customerBaseVo.address" :disabled="disabledInfo" placeholder="详细地址"></Input>
					</FormItem>
					<FormItem label="身高:">
						<Input v-model="customerBaseVo.height" :disabled="disabledInfo" placeholder="cm"></Input>
					</FormItem>
					<FormItem label="体重:">
						<Input v-model="customerBaseVo.weight" :disabled="disabledInfo" placeholder="kg"></Input>
					</FormItem>
					<FormItem label="手机号:">
						<Input v-model="customerBaseVo.tel" :disabled="disabledInfo" placeholder="请输入手机号"></Input>
					</FormItem>
					<FormItem label="身份证:">
						<Input v-model="customerBaseVo.idCard" :disabled="disabledInfo" placeholder="请输入身份证"></Input>
					</FormItem>
				</Form>
				<div class="button-box">
					<Button type="dashed" @click="editInfo">编辑</Button>
					<Button :loading="isKeepBase" type="primary" :disabled="disabledInfo" class="keepInfo" @click="keepInfo('baseForm')">保存</Button>
				</div>
			</Col>
			<Col :xs="24" :md="5" class-name="second-column">
				<p class="tip">健康状况</p>
				<Form ref="healthForm" :model="customerHealthVo" :label-width="80">
					<FormItem label="收缩压:">
						<Input v-model="customerHealthVo.sbp" :disabled="disabledHealth" placeholder="mmHg"></Input>
					</FormItem>
					<FormItem label="舒张压:">
						<Input v-model="customerHealthVo.dbp" :disabled="disabledHealth" placeholder="mmHg"></Input>
					</FormItem>
					<FormItem label="体温:">
						<Input v-model="customerHealthVo.t" :disabled="disabledHealth" placeholder="℃"></Input>
					</FormItem>
					<FormItem label="脉搏:">
						<Input v-model="customerHealthVo.pulse" :disabled="disabledHealth" placeholder="次/分"></Input>
					</FormItem>
					<FormItem label="呼吸:">
						<Input v-model="customerHealthVo.r" :disabled="disabledHealth" placeholder="次/分"></Input>
					</FormItem>
					<FormItem label="血型:">
						<Select id="blood" v-model="customerHealthVo.blood" :disabled="disabledHealth" placeholder="请选择血型" style="width: 100%">
							<Option value="A型">A型</Option>
							<Option value="B型">B型</Option>
							<Option value="AB型">AB型</Option>
							<Option value="O型">O型</Option>
							<!--<Option value="其他">其他</Option>-->
						</Select>
					</FormItem>
					<FormItem label="空腹血糖">
						<Input v-model="customerHealthVo.glu" :disabled="disabledHealth" placeholder="mmol"></Input>
					</FormItem>
					<FormItem label="暴露史">
						<Input v-model="customerHealthVo.exposurehistory" :disabled="disabledHealth" placeholder="请输入暴露史"></Input>
					</FormItem>
					<FormItem label="药物过敏史">
						<Input v-model="customerHealthVo.drughypersensitivity" :disabled="disabledHealth" placeholder="请输入药物过敏史"></Input>
					</FormItem>
					<FormItem label="食物过敏史">
						<Input v-model="customerHealthVo.foodallergy" :disabled="disabledHealth" placeholder="请输入食物过敏史"></Input>
					</FormItem>
				</Form>
				<div class="button-box">
					<Button type="dashed" @click="editHealth">编辑</Button>
					<Button type="primary" :disabled="disabledHealth" @click="keepHealth('healthForm')">保存</Button>
				</div>
			</Col>
			<Col :xs="24" :md="5">
				<p class="tip">既往史</p>
				<Form ref='historyForm' :label-width="80">
					<FormItem label="疾病:">
						<Input v-model="customerMedicationCaseVos.medicationname" :disabled="disabledHistory" placeholder="请输入疾病名称"></Input>
					</FormItem>
					<FormItem label="确诊时间:">
                		<DatePicker :value="medicationtime" :disabled="disabledHistory" type="date" format="yyyy-MM-dd" placeholder="请选择确诊时间" style="width: 100%" @on-change='setMedicationtime'></DatePicker>						
					</FormItem>
					<FormItem label="手术:">
						<Input v-model="customerSurgeryCaseVos.surgeryname" :disabled="disabledHistory" placeholder="请输入手术名称"></Input>
					</FormItem>
					<FormItem label="外伤:">
						<Input v-model="customerTraumaCaseVos.traumaname" :disabled="disabledHistory" placeholder="请输入部位名称"></Input>
					</FormItem>
				</Form>
				<div class="button-box">
					<Button type="dashed" @click="editHistory">编辑</Button>
					<Button type="primary" :disabled="disabledHistory" @click="keepHistory('historyForm')">保存</Button>
				</div>
			</Col>
			<Col :xs="24" :md="4" class-name="second-column">
				<p class="tip">家族遗传史</p>
				<Form :label-width="90">
					<FormItem label="亲属:">
						<Input v-model="customerRelationShipVos.name" :disabled="disabledHeredity" placeholder="请输入亲属"></Input>
					</FormItem>
					<FormItem label="疾病名称:">
						<Input v-model="customerRelationShipVos.medicationname" :disabled="disabledHeredity" placeholder="请输入疾病名称"></Input>
					</FormItem>
					<!--<FormItem label="遗传疾病名称:">
						<Input :disabled="disabledHeredity" placeholder="请输入遗传疾病名称"></Input>
					</FormItem>-->
				</Form>
				<div class="button-box">
					<Button type="dashed" @click="editHeredity">编辑</Button>
					<Button type="primary" :disabled="disabledHeredity" @click="keepRelationShip">保存</Button>
				</div>
			</Col>
			<Col :xs="24" :md="4">
				<p class="tip">给药方法</p>
				<Form :label-width="80">
					<FormItem label="药物名称">
						<Input v-model="customerMedicationRecordVos.medicationName" :disabled="disabledPlan" placeholder="请输入药物名称"></Input>
					</FormItem>
					<FormItem label="用药时间">
						<DatePicker :value="customerMedicationRecordVos.course" :disabled="disabledPlan" type="date" format="yyyy-MM-dd" placeholder="请选择用药时间" style="width: 100%" @on-change="setRecordTime"></DatePicker>	
					</FormItem>
					<FormItem label="用药剂量">
						<Input v-model="customerMedicationRecordVos.dose" :disabled="disabledPlan" placeholder="mg"></Input>
					</FormItem>
					<FormItem label="频次">
						<Input v-model="customerMedicationRecordVos.medicationDate" :disabled="disabledPlan" placeholder="一日三次"></Input>
					</FormItem>
				</Form>
				<div class="button-box">
					<Button type="dashed" @click="editPlan">编辑</Button>
					<Button type="primary" :disabled="disabledPlan" @click="keepPlan">保存</Button>
				</div>
				
			</Col>
		</Row>
		
	</div>
</template>

<!-- 既往史、家族遗传史、给药方法 保存 操作实际上只是编辑，当数据为空的时候是不能保存的 -->

<script>
	export default {
		data(){
			return {
				isTrue: false,
				headpic: '', //  头像
				resArr: [],  //'广东省','深圳市','南山区'
                // 基本信息
				customerBaseVo: {
					id: '',
					age: '',
					birthday: '',
					gender: '',
					height: '',
					idCard: '',
					realName: '',
					tel: '',
					weight: '',
					province: '',
					city: '',
					area: '',
					address: '',
					customer_id: ''
				},
				// 健康状况
				customerHealthVo: {
					dbp: '', //  舒张压
					sbp: '', //   收缩压
					t: '', //体温
					pulse: '', //脉搏
					r: '', //呼吸
					glu: '', //空腹血糖
					blood: '', //血型
					drughypersensitivity: '', //药物过敏史
					foodallergy: '', //食物过敏史
					exposurehistory: '', //暴露史
				},
				//  既往史
				// 既往史
				customerMedicationCaseVos: {
					id: '',
					medicationname: '',  //  疾病名称
					medicationtime: ''   //  时间
				},
				medicationtime: '',
				// 既往史
				customerSurgeryCaseVos:{
					surgeryname: ''    //   手术名称
				},
				// 既往史
				customerTraumaCaseVos:{
					traumaname: ''     // 部位
				},
				// 遗传病史
//				heredityCasesVoList: {
//					heredityName: ''  //  遗传病名称
//				},
				// 用药史
				customerMedicationRecordVos:{
					id: '',
					medicationName: '',   //阿莫西林
					dose: '',   //	200g
					medicationDate: '',   //	一天3次
					course: ''   //  开始时间
				},
				// 家族史
				customerRelationShipVos:{
					id: '',
					name: '',      //  亲属
					medicationname: ''   //疾病名称
				},
				obj: {
					// 既往史
					"medicationCasesVoList": [{
						"medicationName": "",   //  疾病名称
						"medicationTime": ''	//  疾病时间
					}],
					// 既往史
					"surgeryCasesVoList": [{
						"surgeryName": ""	//  手术名
					}],
					// 既往史
					"traumaCasesVoList": [{
						"traumaName": ""	//  外伤名
					}],
					//遗传病
					"heredityCasesVoList": [{
						"heredityName": ""  
					}],
					//  用药史
					'medicationRecordVoList': [{
						'medication_name': "",
						'dose': "",
						'medication_date': "",
						'course': ""
					}],
					//家族史
					'relationShipVoList':[{
						'name': "",
						'medicationName': ""
					}],
					"customer_id": ''
				},
				isReadonly1: true,
				gender: '', 
				isKeepBase: false,
				disabledInfo: true,		//基本信息
				disabledHealth: true,		//  健康状况
				disabledHistory: true,		//  既往史
				disabledHeredity: true,   //  家族遗传史
				disabledPlan: true   //  给药方法
			}
		},
		methods:{
			///  城市选择
			handleOnSelectorChange(value) {
				if(value.length === 1) {
					this.customerBaseVo.province = value[0];
				}else if(value.length === 2) {
					this.customerBaseVo.city = value[1];
				} else if(value.length === 3) {
					this.customerBaseVo.area = value[2];
				}
			},
			//  确诊时间   时间戳转日期
			changeTime1(){
				function add0(m) {
					return m < 10 ? '0' + m : m
				}
				function format(shijianchuo) {
					//shijianchuo是整数，否则要parseInt转换
					var time = new Date(shijianchuo);
					var y = time.getFullYear();
					var m = time.getMonth() + 1;
					var d = time.getDate();
					return y + '-' + add0(m) + '-' + add0(d);
				}
				format(this.medicationtime)
				this.medicationtime = (format(this.medicationtime))
			},
			// 获取数据
			getData(){
//				console.log('/customer/detail_' + this.customer_id)
				this.$http.get('/customer/detail_' + this.customer_id)
				.then(({data})=>{
					this.headpic = 'http://dxyisudai.com'+data.data.customerBaseVo.headpic;  //头像
					//  判断 既往史 、 家族遗传史、给药方法 是否有数据
					if(data.data.customerMedicationCaseVos.length !== 0){
						this.customerMedicationCaseVos.id = data.data.customerMedicationCaseVos[0].id; //  既往史id
					}
					if(data.data.customerRelationShipVos,length !== 0){
						this.customerRelationShipVos.id = data.data.customerRelationShipVos[0].id;  //  家族遗传史id
					}
					if(data.data.customerMedicationRecordVos.length !== 0){
						this.customerMedicationRecordVos.id = data.data.customerMedicationRecordVos[0].id;  //  给药方法id
					}
					// 处理 城市选择 
					let province = data.data.customerBaseVo.province;
					let city = data.data.customerBaseVo.city;
					let area = data.data.customerBaseVo.area;
					let arr = []
					this.resArr.push(province,city,area)
//					console.log(this.resArr)
					
					// 此处有bug，  写完再修改
					//  处理基本信息
					// 时间戳转日期
					var date = new Date(data.data.customerBaseVo.birthday);
					let Y = date.getFullYear() + '-';
					let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
					let D = date.getDate();
					D = D < 10 ? '0' + date.getDate() : D
					data.data.customerBaseVo.birthday = Y + M + D;
					
					
					this.customerBaseVo = data.data.customerBaseVo;
//					console.log(data.data.customerBaseVo)
					// gender 转字符串
					data.data.customerBaseVo.gender = data.data.customerBaseVo.gender + '';
					//  转换男女
					
					// 健康状况
					this.customerHealthVo = data.data.customerHealthVo;
					
					
					// 既往史
					for(let i=0;i<data.data.customerMedicationCaseVos.length;i++){
						// 疾病  
						if(data.data.customerMedicationCaseVos[i].medicationname !== ''){
							this.customerMedicationCaseVos.medicationname = data.data.customerMedicationCaseVos[i].medicationname;
						}
						// 确诊时间
						if(data.data.customerMedicationCaseVos[i].medicationtime !== 'null'){
							this.medicationtime = data.data.customerMedicationCaseVos[i].medicationtime;
							// 时间戳转日期
							this.changeTime1()
						}
					}
					
					// 既往史
					 //既往史  手术名
					for(let e=0;e<data.data.customerSurgeryCaseVos.length;e++){
						if(data.data.customerSurgeryCaseVos[e].surgeryname !== ''){
							this.customerSurgeryCaseVos.surgeryname = data.data.customerSurgeryCaseVos[e].surgeryname; // 手术名
						}
					}
					// 既往史  部位
					for(let r=0;r<data.data.customerTraumaCaseVos.length;r++){
						if(data.data.customerTraumaCaseVos[r].traumaname !== ''){
							this.customerTraumaCaseVos.traumaname = data.data.customerTraumaCaseVos[r].traumaname;
						}
					}
					// 家族史
					for(let j=0;j<data.data.customerRelationShipVos.length;j++){
						// 亲属
						if(data.data.customerRelationShipVos[j].name !== ''){
							this.customerRelationShipVos.name = data.data.customerRelationShipVos[j].name;
						}
						// 疾病名称
						if(data.data.customerRelationShipVos[j].medicationname !== ''){
							this.customerRelationShipVos.medicationname = data.data.customerRelationShipVos[j].medicationname;
						}
					}
				// 用药史
					for(let p=0;p<data.data.customerMedicationRecordVos.length;p++){
						//  药物名称
						if(data.data.customerMedicationRecordVos[p].medicationName !== ''){
							this.customerMedicationRecordVos.medicationName = data.data.customerMedicationRecordVos[p].medicationName;
						}
					}
					//  用药史
					for(let h=0;h<data.data.customerMedicationRecordVos.length;h++){
						//  用药时间
						if(data.data.customerMedicationRecordVos[h].course !== ''){
							this.customerMedicationRecordVos.course = data.data.customerMedicationRecordVos[h].course
						}
						//  用药剂量
						if(data.data.customerMedicationRecordVos[h].dose !== ''){
							this.customerMedicationRecordVos.dose = data.data.customerMedicationRecordVos[h].dose
						}
						// 频次
						if(data.data.customerMedicationRecordVos[h].medicationDate !== ''){
							this.customerMedicationRecordVos.medicationDate = data.data.customerMedicationRecordVos[h].medicationDate
						}
					}
					
				})
				.catch((err)=>{
					console.log(err)
				})
				
			},
			//  编辑基本信息
			editInfo(){
				this.disabledInfo = false;
				this.isReadonly1 = false;
			},
//			POST /customer/update_customer_base/{customer_id}
			// 保存基本信息
			keepInfo(refName){
				//  时间转时间戳
				let date = new Date(this.customerBaseVo.birthday);
				this.customerBaseVo.birthday = date.getTime();
				console.log(this.customerBaseVo)
				this.$http.post('/customer/update_customer_base/' + this.customer_id, this.customerBaseVo)
						.then((res)=>{
							this.getData();
							this.disabledInfo = true;
//							console.log(res);
						})
						.catch((err)=>{
							console.log(err);
							this.$Notice.error({ title: "表单提交失败！" });
						})
				
			},
			//  编辑健康状况
			editHealth(){
				this.disabledHealth = false;
			},
			//  保存  健康状况
			keepHealth(refName) {
				console.log(refName)
				this.$http.post('/customer/update_customer_health/' + this.customer_id, this.customerHealthVo)
				.then((res)=>{
//					console.log(res);
					this.getData();
					this.disabledHealth = true;
				})
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "表单提交失败！" });
				})
			},
			//  编辑既往史
			editHistory(){
				this.disabledHistory = false;
			},
			//  既往史  设置时间
			setMedicationtime(date){
				this.medicationtime = date;
			},
			// 保存既往史
			keepHistory(refName){
				delete this.customerMedicationCaseVos.id; // 后台说不用传id
				//  时间转时间戳
				console.log(this.customerMedicationCaseVos)
				this.customerMedicationCaseVos.medicationtime = Date.parse(new Date(this.medicationtime))
				this.$http.post('/customer/update_customer_medication_cases/' + this.customer_id, [this.customerMedicationCaseVos])
				.then((res)=>{
					console.log(res)
					this.disabledHistory = true; //  保存完输入框变为不能输入
				})
				.catch((err)=>{
					console.log(err)
				})
				
				//  修改既往史之手术
				this.$http.post('/customer/update_customer_surger_case/' + this.customer_id, [this.customerSurgeryCaseVos])
				.then((res)=>{
					console.log(res)
				})
				.catch((err)=>{
					console.log(err)
				})
				//  修改既往史之外伤
				this.$http.post('/customer/update_customer_trauma_case/' + this.customer_id, [this.customerTraumaCaseVos])
				.then((res)=>{
					console.log(res)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			 //  编辑家族遗传史
			editHeredity(){
				this.disabledHeredity = false;
			},
			//  保存家族遗传史
			keepRelationShip(){   //  POST /customer/update_customer_relation_ship/{customer_id}
				this.$http.post('/customer/update_customer_relation_ship/' + this.customer_id, [this.customerRelationShipVos])
				.then((res)=>{
					console.log(res)
					this.disabledHeredity = true;
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 给药方法编辑
			editPlan(){
				this.disabledPlan = false;
			},
			// 给药方法设置时间
			setRecordTime(date){
				this.customerMedicationRecordVos.course = date;
			},
			//  保存给药方法
			keepPlan(){   //  POST /customer/update_customer_medication_record/{customer_id}
				console.log(this.customerMedicationRecordVos)
				this.$http.post('/customer/update_customer_medication_record/' + this.customer_id, [this.customerMedicationRecordVos])
				.then((res)=>{
					console.log(res);
					this.disabledPlan = true;
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 基本信息  出生日期  时间设置
			setTime(date){
				this.customerBaseVo.birthday = date;
			}
			
		},
		beforeRouteLeave(to,from,next){
			console.log(to)
			console.log(from)
			next()
		},
		created(){
			// 传值   获取到Personal.vue 传过来的id
			this.customer_id = this.$route.params.id;
			this.customerBaseVo.customer_id = this.$route.params.id;
			
			this.customerBaseVo.id = this.$route.params.id;
			
//			this.customerMedicationCaseVos.id = this.$route.params.id;  //  既往史 id
//			this.customerRelationShipVos.id = this.$route.params.id;  //  家族遗传史id
			this.getData();
			
		}
	}
</script>

<style lang="less" scoped>
.three-column {
		padding: 20px 0;
		.second-column {
			border-right: 1px solid #ccc;
			border-left: 1px solid #ccc;
		}
	}
	
	.tip {
		font-size: 16px;
		margin-bottom: 16px;
		color: #0b9595;
	}
	
	.button-box {
		border-top: 1px solid #ccc;
		text-align: center;
		padding-top: 24px;
	}
	.keepInfo{
		margin-left: 20px;
	}
</style>